<script setup lang="ts">
import { reactive } from 'vue';
// 注册验证规则
import { registerRules } from '../utils/rules';
// hook
import { useUserStoreHook } from '@/store/modules/user';
// 过渡动画
import Motion from '../utils/motion';
// 中英文切换
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// 表单数据
const loginForm = reactive({
	phone: '',
	captcha: ''
});
</script>
<template>
	<el-form :model="loginForm" :rules="registerRules" status-icon ref="ruleFormRef">
		<Motion :delay="100">
			<!-- 手机号 -->
			<el-form-item prop="phone" class="mt-6">
				<el-input v-model="loginForm.phone" :placeholder="t('login.phone')" clearable>
					<template #prefix>
						<svg-icon icon-class="login-phone" class="login-iconSize" />
					</template>
				</el-input>
			</el-form-item>
		</Motion>

		<Motion :delay="150">
			<!-- 短信验证码输入框 -->
			<el-form-item prop="captcha" class="phoneCode between-box">
				<el-input v-model="loginForm.captcha" :placeholder="t('login.smsVerifyCode')" clearable>
					<template #prefix>
						<svg-icon icon-class="login-captcha" class="login-iconSize" />
					</template>
				</el-input>
				<!-- 获取短信验证码按钮 -->
				<el-button plain size="large" class="btn-green ml-8">
					{{ t('login.getVerifyCode') }}
				</el-button>
			</el-form-item>
		</Motion>

		<Motion :delay="200">
			<!-- 确定按钮 -->
			<el-form-item>
				<el-button type="primary" class="w-full">{{ t('login.login') }}</el-button>
			</el-form-item>
		</Motion>

		<Motion :delay="250">
			<!-- 返回按钮 -->
			<el-form-item>
				<el-button class="w-full" @click="useUserStoreHook().SET_CURRENTPAGE(0)">
					{{ t('login.back') }}
				</el-button>
			</el-form-item>
		</Motion>
	</el-form>
</template>
